<template>
    <div class="barrage">
        <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
                <template slot="title">
                    <span class="title">弹幕列表</span>
                </template>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="time" label="时间" width="100">
                    </el-table-column>
                    <el-table-column prop="content" label="弹幕内容">
                    </el-table-column>
                    <el-table-column prop="date" label="发生时间" width="100">
                    </el-table-column>
                </el-table>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
export default {
    name: "VideoBarrage",
    data() {
        return {
            activeNames: null,
            tableData: [{
                time: '2016-05-02',
                content: '哈哈哈',
                date: '10-4 09:10'
            }, {
                time: '2016-05-04',
                content: '王小虎哈哈哈',
                date: '10-4 09:10'
            }, {
                time: '2016-05-01',
                content: 'ad是阿萨',
                date: '10-4 09:10'
            }, {
                time: '2016-05-03',
                content: '王小的撒的撒虎',
                date: '10-4 09:10'
            }]
        }
    }
}

</script>

<style scoped>
.barrage {
    margin-bottom: 20px;
}

::v-deep .el-collapse-item__header {
    background-color: rgb(241, 242, 243);
    border-radius: 6px;
}

.title {
    font-size: 15px;
    font-weight: 500;
    padding: 0 10px 0 16px;
}

::v-deep .el-table .cell {
    font-size: 12px !important;
    height: 32px;
    line-height: 32px;
}

::v-deep .el-table .el-table__cell {
    padding: 0 !important;
}
</style>